<template>
    <el-dialog
        v-loading="loading"
        v-model="dialogVisible"
        :title="formConfigData.configuration ? '修改脚本配置' : '脚本配置'"
        width="500"
        :before-close="handleClose"
    >
        <form-create :rule="rule" v-model:api="fApi" :option="options" />

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup>
    import { createConfigApi, updateConfigApi } from '@/api/scriptManage/config.api'
    import { getUischemaApi } from '@/api/scriptManage/index.api'
    import useToggle from "@/hooks/useToggle";
    const [loading, , setLoading] = useToggle();
    const [dialogVisible, , setDialogVisible] = useToggle();
    const configId = ref(null)
    const configName = ref(null)

    const emits = defineEmits(['refresh'])

    const fApi = ref({});
    const options = {
        onSubmit: (formData) => {
            const {formConfigName, ...other} = formData
            const params = {
                name: formConfigName,
                configuration: other
            }
            if(formConfigData.value.id) {
                updateConfigApi(params, configName.value, formConfigData.value.id).then(res => {
                    ElMessage.success('编辑成功')
                }).finally(() => {
                    emits('refresh')
                    setDialogVisible(false)
                })
                return
            }
            createConfigApi(params, configName.value).then(res => {
                ElMessage.success('添加成功')
            }).finally(() => {
                emits('refresh')
                setDialogVisible(false)
            })
        },
        // resetBtn: true,
    };
    const rule = ref([])
    const formConfigData = ref({})
    const init = (id, name, row) => {
        configId.value = null
        configName.value = null
        setDialogVisible(true)
        nextTick(() => {
            configId.value = id
            configName.value = name
            
            if (row) formConfigData.value = row
            else formConfigData.value = {}
            
            getConfigForm()
        })
    }

    const getConfigForm = async () => {
        setLoading(true)
        const res = await getUischemaApi(configId.value).finally(() => setLoading(false))

        rule.value = [{
            $required: true,
            type: 'input',
            title:  "配置名",
            field: 'formConfigName',
            value: formConfigData.value.name || '',
            display: true,
            placeholder: '请输入配置名',
        }]

        Array.isArray(res) && rule.value.push(...res.map(item => {
            !!formConfigData.value.configuration && (item.value = formConfigData.value.configuration[item.field])
            return item
        }))

        nextTick(() => {
            const submitButton = document.querySelector('.fc-form-item .fc-submit-btn');
            if (submitButton) submitButton.style.display = 'none';
        })
    }

    const handleClose = () => setDialogVisible(false)

    const handleSubmit = () => {
        const submitButton = document.querySelector('.fc-form-item .fc-submit-btn');
        if (submitButton) submitButton.click();
    }

    defineExpose({
        init
    })
</script>
